<template>

  <div class="page">
    <!--  #ifdef  H5 -->
    <video v-if="userInfo.live_status == 1" id="myVideo" class="video" object-fit="cover" :controls="false"
      :autoplay="true" :show-center-play-btn="false" :enable-progress-gesture="false"
      :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>
    <video v-if="userInfo.live_status == -1" id="myVideo" class="video" object-fit="cover" :controls="false"
      :autoplay="true" :show-center-play-btn="true" :enable-progress-gesture="false" :src="pullUrl"
      :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>
    <!--  #endif -->

    <!--  #ifdef  MP-WEIXIN -->
    <video v-if="userInfo.live_status == -1" id="myVideo" class="video" :src="pullUrl" object-fit="cover"
      :controls="false" :autoplay="true" :show-center-play-btn="false" :enable-progress-gesture="false"
      :style="{width:windowWidth+'px',height:windowHeight+'px'}"></video>

    <live-player v-if="userInfo.live_status == 1" id="livePlayer" class="livePlayer" mode="live"
      :picture-in-picture-mode="pictureInPictureMode" :src="pullUrl" autoplay @statechange="statechange"
      @error="error" :style="{width:windowWidth+'px',height:windowHeight+'px'}" object-fit="fillCrop"
      min-cache="1" max-cache="20" />
    <!--  #endif -->
    <div class="playerPanel">

      <div class="head w-flex"
        @click="$u.route({url:'pagesC/shop/storeDetails',params:{shop_id:userInfo.shop_id}})">
        <div class="avatarwrap" @click="toShop(userInfo.shop_id)">
          <image class="avatar" :src="userInfo.shop_logo"></image>
          <div class="info" @click="toShop(userInfo.shop_id)">
            <p class="shopname">{{userInfo.shop_name}}</p>
            <p class="seenum">在线人数{{ userInfo.online_num }}</p>
          </div>
          <span class="attentionBtn" @click="changeAtten">{{ userInfo.is_follow ===  1 ? '已关注': '关注' }}
          </span>
        </div>

      </div>
      <div class="identification">
        <span class="left">房间ID：{{userInfo.room}}</span>
        <span class="rightID"></span>
      </div>
      <div class="topRightWrap" @click="onClose">
        <image class="topRightWrapClose" src="/static/images/live/close.png"></image>
      </div>
      
      <!-- 礼物滚动消息 -->
      <giveGift :giveGiftList="giveGiftList"></giveGift>

      <scroll-view class="liveSayWrap" scroll-y="true" scroll-with-animation="true" @scroll="liveScroll"
        :scroll-top="scrollTop" @scrolltolower="scrolltolower" :scroll-into-view="scrollIntoView">
        <div class="tipwrap">
          {{ userInfo.system_notice }}
        </div>
        <div v-for="(item, index) in msgList" :key="index" class="item">
          <div :id="'msg-' + index" class="item-item" :class="[item.username ? 'tip-scroller__msg--active' : '']">
            <text class="tip-scroller__tag tip-scroller__member" v-if="item.username">{{ item.username ? item.member_rank : '' }}</text>
            <text class="tip-scroller__tag" v-if="item.username">{{ item.username ? item.rank : '' }}</text>
            <p class="username">
              <span @click="liveRoomMonitoring(item)">
                {{ item.username ? item.username + '：' : '' }}</span>
            </p>
            <text class="" v-for="(text, i) in item.msg" :key="i"> {{ text }}</text>
          </div>
          <div></div>
        </div>
      </scroll-view>
      <!-- <floatWindow :goodsDetails="liveGoodsList[2] || {}" ></floatWindow> -->
      <div class="footerWrap w-flex">
        <div class="w-flex">
          <div class="goodsImgWrap">
            <image class="goods" src="/static/images/live/icon-liveBaby.png" @click="letGoodsShow"></image>
            <span class="num" v-if="liveGoodsList.length">
              {{liveGoodsList.length?liveGoodsList.length:''}}
            </span>
          </div>
          <input type="text" v-model="inputValue" confirm-type="send" @confirm="send" maxlength="20"
            class="sayInput" name="input" placeholder="聊点什么吧~" placeholder-class="sayInputP" />
        </div>
        <div class="w-flex">
          
          <button class="shareButton" :plain="true" open-type="share" @click="sharePopUp()">
            <u-image width="60" height="60" src="/static/images/icon-share.png">
            </u-image>
          </button>
          <div>
            <image class="appraise u-m-r-20 " @click="showGift"
              :src="imgStaticUrl+'/images/gift-btn.png'"></image>
          </div>
          <div>
            <image class="appraise " @click="praiseAction"
              src="/static/images/praiseIcon/icon-appraise.png"></image>
          </div>
          
        </div>
      </div>
    </div>

    <!-- 商品属性选择组件 -->
    <u-popup mode="bottom" ref="goodsAttrPopUp" border-radius="16">
      <goodsAttar :propObj="goodsInfo" :GoodsAttrs="goodsInfo.radioattr"></goodsAttar>
    </u-popup>

    <!--  #ifndef  MP-WEIXIN -->
    <u-popup mode="bottom" ref="sharePopUp" class="shareWrap" border-radius="16">
      <div class="wrap">
        <div class="shareItem" @click="copyShareLink">
          <image class="shareIconWrap" mode="widthFix" src="/static/images/share/icon-copyLink.png"></image>
          <p class="shareTit">复制链接</p>
        </div>
      </div>
    </u-popup>
    <!--  #endif -->

    <u-popup mode="center" v-model="isBannedPanelShow" width="80%" border-radius="8">
      <div class="u-flex u-col-center avatarBox">
        <u-avatar :src="currUserInfo.headimgurl"></u-avatar>
        <p class="avatarBoxName">确认<span style="color:#f44336">{{banradio}}</span> 用户:{{currUserInfo.username}}
        </p>
      </div>
      <div class="bannerdAction">
        <u-form-item>
          <u-radio-group v-model="banradio">
            <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
              :disabled="item.disabled">
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-button type="success" @click="banConfirm">确定</u-button>
      </div>
    </u-popup>

    <!--  直播间商品列表组件-->
    <liveGoodsList ref="liveGoodsPopup" :goodsList="liveGoodsList" :room="userInfo.room"/>
    <!-- 礼物列表 -->
    <uni-popup class="gift-popup" ref="giftPopup" :safeArea="false" type="bottom"
      mask-background-color="rgba(0, 0, 0, 0.1)">
      <gift :giftList="giftList" :goldCoin="userGoldCoin" @giveGift="giveGift"></gift>
    </uni-popup>

    <div class="-warp">
      <image class="like-image" :class="[item.active ? 'like-active' : '']"
        src="/static/images/live/icon-liveBaby.png" v-for="(item, index) in likeList" :key="index"></image>
    </div>
    <div class="praise_bubble">
      <div v-for="(item, index) in appraiseList" :key="index" class="bubble" :class="[item.srcB,item.animaB]"
        :data-t="item.time">
      </div>
    </div>
    <u-toast ref="uToast" />
    
    
    <view class="liansong_donghua_box" v-if="show">
      <tanGoods :name="data.name" :song_name="data.text" ref="RboyLiansong" @onStop="onStop3"></tanGoods>
    </view>
	
    
  </div>
</template>

<script>
  import goodsAttar from './components/goodsAttar';
  import liveGoodsList from "./components/liveGoodsList";
  import shareJS from "@/utils/share.js";
  // import floatWindow from './components/floatWindow';
  // import gift from '@/pagesC/live/components/gift';
  // import giveGift from '@/pagesC/live/components/giveGift';
  import gift from './components/gift';
  import giveGift from './components/giveGift';
  import tanGoods from './components/tanGoods';
  //  #ifdef  H5
  // flvjs如何使用:
  import flvjs from 'flv.js'
  // #endif

  let client_id;
  let token;

  import {
    APPNAME,
    LIVESOCKET
  } from '../config/index';
  export default {
    mixins: [shareJS],
    data() {
      return {
        imgStaticUrl: '',
        background: {
          backgroundColor: 'rgba(28, 187, 180,0)'
        },
        pullUrl: '',
        appName: '',
        context: null,
        shopid: '',
        likeList: [],
        windowWidth: uni.getSystemInfoSync().screenWidth,
        windowHeight: uni.getSystemInfoSync().screenHeight,
        userInfo: {},
        liveGoodsList: [],
        liveCustomerList: [],
        commentsList: [],
        currLikeIndex: -1,
        inputValue: '',
        token: '',
        msgList: [],
        userAvatarList: [],
        isShowAction: true,
        currUserInfo: {},
        goodsInfo: {},
        offsetTop: 0,
        appraiseList: [],
        isBannedPanelShow: false, //是否显示   直播间管理面板
        banradio: '拉黑',
        radioList: [{
            name: '拉黑',
            disabled: false
          },
          {
            name: '禁言',
            disabled: false
          }
        ],
        pictureInPictureMode: ['pop', 'push'],
        scrollTop: 0,
        scrollIntoView: '',
        giftList: [],
        giveGiftList: [],
        scrollTop: 0,
        userGoldCoin:0,
        data:[],
        show:false,
      }
    },

    components: {
      goodsAttar,
      liveGoodsList,
      gift,
      giveGift,
      // floatWindow,
      tanGoods
    },
    onShareAppMessage(res) {
      if (res.from === 'button') { // 来自页面内分享按钮

      }
      return {
        title: 'WoShop直播种草电商',
        path: `/platforms/live-player?shop_id=${this.shopid}`
      }
    },
    
    onReady() {
      setInterval(()=>{
        this.giftAutoHide();
      },2000)
    },

    async onLoad(option) {
      this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）
      this.getGiftList()
      token = uni.getStorageSync('token')
      if (!token) {
        uni.showModal({
          title: "提示",
          content: "当前暂未登录,无法观看直播",
          confirmText: "登录",
          success: function(res) {
            if (res.confirm) {
              // #ifdef MP-WEIXIN
              uni.switchTab({
                url: '/pages/tabBar/my'
              });
              // #endif
              // #ifdef H5
              uni.navigateTo({
                url: '/pagesB/login/login'
              });
              // #endif
              return false;
            } else if (res.cancel) {
              uni.navigateBack()
            }
          }
        });

      }

      this.appName = APPNAME

      this.$loading('加载中')
      client_id = uni.getStorageSync('client_id')
      this.shopid = await option.shop_id //获取店铺id
      this.shareLink = uni.getStorageSync('baseUrl')+'h5/#/platforms/live-player?shop_id='+option.shop_id
      this.token = await uni.getStorageSync('token') // 获取用户token
      await this.getLiveinformation() //根据店铺id获取店铺详情信息
      this.getLiveGoodsList() //根据店铺id获取直播间商品列表

      // #ifdef MP-WEIXIN
      uni.setKeepScreenOn({
        keepScreenOn: true
      })
      this.context = uni.createLivePlayerContext("livePlayer", this)
      await this.context.play()
      uni.hideLoading();
      // #endif

      //  点赞轮询动画  在页面hook:beforeDestroy时销毁
      let setpraiseAction = setInterval(() => {
        this.praiseAction()
      }, 500)
      this.$on('hook:beforeDestroy', () => {
        clearInterval(setpraiseAction);

      })
      this.$hideLoading()
    },

    methods: {
      giftAutoHide(){
        if(this.giveGiftList.length){
          setTimeout(()=>{
            this.giveGiftList.splice(0,1)
          },2000)
        }
      },
      showGift() {
        this.$refs.giftPopup.open('bottom')
      },
      // 直播间礼物列表
      getGiftList() {
        this.$http.getLiveGiftList().then(res => {
          this.giftList = res.data
        })
      },
      giveGift(info) {
        if(this.userGoldCoin<info.gift_coin){
          uni.showToast({
            title: '您的金币不足',
            duration: 2000,
            icon: 'none'
          });
          return;
        }
		if(this.userInfo.user_id == this.userInfo.anchor_id){
		  uni.showToast({
		    title: '自己不能给自己直播间赠送礼物',
		    duration: 2000,
		    icon: 'none'
		  });
		  return;
		}
		
        uni.sendSocketMessage({
          data: JSON.stringify({
            type: 'givegift',
            msgtype: 'text',
            id: token,
            room: this.userInfo.room,
            client_id: this.client_id,
            shop_id: this.shopid,
            gift_id: info.gift_id
          })
        });
      
      },
      praiseAction() {

        const randomA = Math.floor(Math.random() * 6) + 1;
        const randomB = Math.floor(Math.random() * 11) + 1; // bl1~bl11
        const time = new Date().getTime()

        const srcB = `b${randomA}`;
        const animaB = `bl${randomB}`;
        let data = {
          srcB,
          animaB,
          time
        }
        this.appraiseList.push(data)
        let index = this.appraiseList.length
        if (index > 20) {
          this.appraiseList.splice(10, index - 1)
        }
      },

      send() {
        if (!this.inputValue) {
          uni.showToast({
            title: '发言不能为空',
            duration: 2000,
            icon: 'none'
          });
          return false;
        }
        uni.sendSocketMessage({
          data: JSON.stringify({
            type: 'livesay',
            msgtype: 'text',
            id: this.token,
            room: this.userInfo.room,
            msg: this.inputValue,
            client_id
          })
        });
        this.inputValue = ''
      },

      getLiveRoomServiceList() {
        let data = {
          shop_id: this.shopid
        }
        this.$http.getLiveRoomServiceList(data).then(res => {
          if (res.status === 200) {
            this.customerList = res.data.data;
          }
        })
      },
      getLiveinformation() {
        let data = {
          shop_id: this.shopid
        }
        this.$http.getLiveinformation(data).then(Res => {
          if (Res.status === 200) {
            this.userInfo = Res.data;
            this.pullUrl = Res.data.addressitem
            this.userGoldCoin = Res.data.gold_coin;
            this.initWebSokcet(Res.data.room)
            //  #ifdef H5
            if (this.userInfo.live_status == 1) {
              setTimeout(() => {
                this.openPlayer(Res.data.addressitem)
              }, 500)

            }
            // #endif

          }
        })
      },
      openPlayer(url) {
        const checkObj = new Map([
          [flvjs.isSupported && url, ],
        ])
        if (flvjs.isSupported && url) {
          const videoEle = document.getElementsByClassName("uni-video-video")[0]
          const flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url,
          });
          flvPlayer.attachMediaElement(videoEle);
          flvPlayer.load();
          flvPlayer.play();
        } else {
          this.$toast('暂无直播或直播回放')
        }
      },
      statechange(e) {
        // console.log('live-player code:', e.detail.code)
      },
      error(e) {},

      getGoodsInfo(item) {
        this.$refs.PopUp.close()
		console.log("详情")
        let data = {
          goods_id: item.id,
          fangshi: 1,
		  type:"live",
        }
        this.$http.getGoodsInfo(data).then(res => {
          if (res.status === 200) {
            this.goodsInfo = res.data || {}

            this.$refs.goodsAttrPopUp.open()
          }
        })
      },
      previewCommentImg(imgs, index) {
        // 预览图片
        uni.previewImage({
          urls: imgs,
          current: index,
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '关注'],
            success: function(data) {

            },
            fail: function(err) {

            }
          }
        });
      },
      liveScroll(e) {

      },
      scrolltolower(e) {
        this.offsetTop = e.currentTarget.offsetTop
      },
      letCustomerShow() {
        this.$refs.customerPopUp.open()
      },
      liveRoomMonitoring(data) {
        if (data.block_type !== 0) return;
        const role = uni.getStorageSync('role') || ''; //管理员角色身份
        const list = ['shop', 'service'] //商家和客服身份有拉黑 禁言等直播间管理权限
        if (!list.includes(role)) return;
        if (data.username && data.role === 'user') {
          this.currUserInfo = data;
          this.isBannedPanelShow = true;
        }
      },
      openBuyerPop() {
        this.$refs.buyerPopUp.open()
      },
      go2bottom() {
        const indicatorId = 'msg-' + (this.msgList.length - 1);
        this.scrollIntoView = indicatorId
      },
      sharePopUp() {
        // #ifdef MP-WEIXIN
        return false
        // #endif     
        this.$refs.sharePopUp.open()
      },

      // 获取直播间商品列表信息
      letGoodsShow() {
        this.$refs.liveGoodsPopup.goodsPopShow = true
      },
      getLiveGoodsList() {
        let data = {
          page: 1,
          shop_id: this.shopid
        }
        this.$http.getLiveGoodsList(data).then(Res => {
          if (Res.status === 200) {
            this.liveGoodsList = Res.data.data;
          }

        })
      },
      initWebSokcet(room) {
        uni.onSocketOpen(res => {
          // console.log('直播间WebSocket连接已打开！');
          uni.sendSocketMessage(
            JSON.stringify({
              type: 'ping',
              id: this.token
            })
          );
        });
        /*
         *   直播间首次建立socket:   发送{data} 简历直播间websocket链接
         *   bindlive_id：  直播间绑定id
         *   token：         用户token
         *   room：          房间号，由直播间详情页接口生成 （this.$http.getLiveinformation）
         *   client_id:      客户端标示
         * */
        uni.sendSocketMessage({
          data: JSON.stringify({
            type: 'bindlive_id',
            id: this.token,
            room: room,
            client_id
          })
        });
        uni.onSocketMessage(res => {
          const data = JSON.parse(res.data)
          if (data.type === 'livesay') {
            this.msgList.push(data.data);
            this.$nextTick(() => {
              setTimeout(() => {
                this.go2bottom();
              }, 50);
            });
          }
          
          if(data.type === 'buygoods') {
            if (this.show) {
              this.$refs.RboyLiansong.set_liansong()
            } else {
              this.show = true
            }
            this.data = data.list;
          }
          
          if (data.type === 'givegiftlist') {
            this.giveGiftList.push(data.data);
            this.$nextTick(() => {
              setTimeout(() => {
                this.go2bottomGift();
              }, 50);
            });
			this.getLiveinformation() //根据店铺id获取店铺详情信息
          }

          if (data.type === 'notice') {
            this.msgList.push({
              msg: data.msg
            });
            this.userAvatarList.unshift(data.data.headimgurl);
            this.$nextTick(() => {
              setTimeout(() => {
                this.go2bottom();
              }, 50);
            });
          }

        })


      },
      
      // 动画结束
      onStop3() {
        this.show = false
      },

      go2bottomGift() {
        const indicatorId = 'gift-msg-' + (this.msgList.length - 1);
        // this.scrollIntoView = indicatorId
      },
      async banConfirm() {
        // 单场禁言：type:2         永久禁言(拉黑)：type:3
        const map = new Map([
          ['禁言', {
            name: '禁言',
            type: 2
          }],
          ['拉黑', {
            name: '拉黑',
            type: 3
          }],
        ])
        const audience = this.currUserInfo
        const mapGet = map.get(this.banradio)
        await uni.sendSocketMessage({
          data: JSON.stringify({
            type: 'blockUser',
            id: this.token,
            shopid: this.shopid,
            userid: audience.user_id,
            room: this.userInfo.room,
            blockType: mapGet.type
          })
        })
        this.isBannedPanelShow = false
        this.$refs.uToast.show({
          title: `${audience.username}已被${mapGet.name}`,
          type: 'success',
        })
      },


      linkTo(url) {
        uni.navigateTo({
          url,
          animationType: 'pop-in'
        });
      },
      // 跳到商品详情页
      toGoodsDetali(goodsid) {
        uni.navigateTo({
          url: '/pagesC/goods/goodsDetails?id=' + goodsid,
          animationType: 'slide-in-right',
          animationDuration: 300
        });
      },
      changeAtten() {
        if (this.userInfo.is_follow === 0) {
          this.getshopcoll()
        } else {
          this.getshopcancelcoll()
        }
      },
      getshopcoll() {
        this.$http.getshopcoll({
          shop_id: this.shopid
        }).then(res => {
          if (res.status === 200) {
            this.$toast(res.mess)
          }
        })
      },
      getshopcancelcoll() {
        this.$http.getshopcancelcoll({
          shop_id: this.shopid
        }).then(res => {
          if (res.status === 200) {
            this.$toast(res.mess)
          }
        })
      },

      toShop(shop_id) {
        uni.navigateTo({
          url: '/pagesC/shop/storeDetails?shop_id=' + this.shopid,
          animationType: 'slide-in-right',
          animationDuration: 300
        });
      },
      onClose() {
        uni.navigateBack({
          delta: 1
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '~uview-ui/index.scss';
  .page {
    color: #fff;
    overflow: hidden;
    background-color: #000;
  }

  .playerPanel {
    position: fixed;
    top: 0;
    bottom: 0;
    overflow: hidden;
    left: 0;
    right: 0;
    font-size: 28rpx;
    /*  #ifdef  H5 */
    padding-top: 80rpx;

    /*  #endif  */
    .head {
      padding: 5rpx 18rpx;
      /*  #ifdef  MP-WEIXIN */
      margin-top: 80rpx;
      /*  #endif */

      .avatarwrap {
        display: inline-flex;
        align-items: center;
        background: rgba(#fff, 0.2);
        padding: 4rpx 10rpx;
        border-radius: 400rpx;

        .avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 500rpx;
        }

        .info {
          margin-left: 10rpx;
          width: 170rpx;

          .shopname {
            font-size: 28rpx;
            line-height: 1.3;
            font-weight: 800;
            color: #f1f1f1;
          }

          .seenum {
            font-size: 24rpx;
            font-weight: nornal;
            color: #eee;
          }
        }
      }

      .attentionBtn {
        background: linear-gradient(45deg, #fa3f3f, #fb8c43);
        border-radius: 100rpx;
        padding: 0 18rpx;
        font-size: 24rpx;
        margin-left: 10rpx;
        text-align: center;
        line-height: 55rpx;
        height: 55rpx;
        font-weight: 800;
      }

      .shopHead {
        border: 2rpx solid #fff;
        text-align: center;
        margin: 0 40rpx;
        border-radius: 10rpx;

        p {
          font-size: 24rpx;
          line-height: 1.4;
        }

        p:first-child {
          background: #fff;
          color: salmon;
          padding: 0 8rpx;
        }

      }

    }
  }

  .topRightWrap {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #fff;
    border-radius: 200rpx;
    opacity: 0.5;
    position: fixed;
    width: 60rpx;
    height: 60rpx;
    right: 30rpx;
    top: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .topRightWrapClose {
    width: 40rpx;
    height: 40rpx;
    border-radius: 40rpx;
  }

  .footerWrap {
    position: fixed;
    bottom: 40rpx;
    left: 0;
    right: 0;
    padding: 0 20rpx;
    justify-content: space-between;
    background-color: rgba(#000, 0);

    .goods {
      width: 70rpx;
      height: 80rpx;
    }

    .goodsImgWrap {
      position: relative;

      .num {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -30%);
        color: #fff;
        font-weight: 800;
      }
    }

    .sayInput {
      width: 320rpx;
      background: rgba(#fff, 0.4);
      padding: 15rpx 30rpx;
      border-radius: 400rpx;
      margin-left: 19rpx;
    }

    /deep/.sayInputP {
      font-size: 28rpx;
      font-weight: bold;
      color: #fff;
    }

    .appraise {
      width: 60rpx;
      height: 60rpx;
    }
  }

  .shareBtn {
    width: 56rpx;

  }

  .reportBtn {
    height: 48rpx;
    border-radius: 500rpx;
    display: inline-block;
    text-align: center;
    line-height: 48rpx;
    margin: 10rpx;
    padding: 8rpx 20rpx;
    opacity: 0.7;
  }

  .w-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .shareWrap {
    /*  #ifndef MP-WEIXIN  */
    padding: 0 25rpx;

    /*  #endif  */
    .wrap {
      display: flex;
      justify-content: space-around;

      .shareItem {
        text-align: center;
        padding: 10rpx;
        color: #333;

        image {
          width: 90rpx;
        }
      }
    }

  }

  /deep/ .uni-popup__wrapper-box {
    border-top-right-radius: 18rpx;
    border-top-left-radius: 18rpx;

  }

  .liveSayWrap {
    position: fixed;
    bottom: 150rpx;
    left: 20rpx;
    width: 500rpx;
    overflow: hidden;
    height: 380rpx;
    font-size: 24rpx;
  }

  .tipwrap {
    @extend .item;
    color: #ff8534;
    border-radius: 8rpx !important;
  }

  .tagimg {
    width: 50rpx;
    margin: 8rpx 8rpx 0;
  }

  view {
    font-size: 24rpx;
  }

  .item {
    background-color: rgba(black, 0.2);
    padding: 0rpx 10rpx;
    border-radius: 100rpx;
    font-size: 24rpx;
    margin-bottom: 10rpx;

    &-item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }

  .username {
    color: #ff8534
  }
  
  .tip-scroller__tag {
    margin-right: 6rpx;
    margin-top: 4rpx;
    padding: 0 6rpx;
    font-size: 22rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    color: #fff;
    border-radius: 10rpx;
    background-image: linear-gradient(to right, #ff6f0f, #fa3e3f);
  }
  
  .tip-scroller__member {
    background-image: linear-gradient(to right, #ff9900, #ffaf37);
  }

  .customer {
    display: flex;
    color: #333;
    position: relative;
    margin-top: 25rpx;

    .avatar {
      width: 90rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }

    .username {
      font-size: 30rpx;
    }

    .tip {
      color: #999;
      font-size: 24rpx;
    }

    .status {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 24rpx;

      .dot {
        width: 14rpx;
        height: 14rpx;
        border-radius: 100px;
        background: #2ccc40;
        display: inline-block;
        margin-right: 10rpx;
      }
    }
  }

  .commentBox {
    display: flex;

    p {
      margin-left: 20rpx;
      font-size: 24rpx;
      color: #929292;
      background: rgba(#fff, 0.3);
      padding: 0 16rpx;
      border-radius: 200px;
      line-height: 1.5;
    }
  }

  .buyerWrap {
    .buyer {
      color: #333;
      margin-bottom: 25rpx;
      border-bottom: 2rpx dashed #f5f5f5;
      padding-bottom: 20rpx;

      .avatar {
        width: 90rpx;
        flex-shrink: 0;
      }

      .info {
        flex: 1;
        margin-left: 20rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }

      .describe {
        margin: 20rpx;

        .quto {
          color: #999;
          font-size: 30rpx;

        }
      }

      .imgwrap {
        display: flex;
        margin-left: 20rpx;

        image {
          width: 100rpx;
        }
      }
    }
  }

  .appraisenum {
    position: fixed;
    bottom: 120rpx;
    right: 40rpx;
    color: #ffa468
  }

  //点赞动画

  $bubble_time:3s;
  $bubble_scale:0.8s;

  .praise_bubble {
    width: 100px;
    height: 200px;
    position: fixed;
    right: 0;
    bottom: 130rpx;
  }

  .bubble {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50px;
    bottom: 0px;
    background-repeat: no-repeat;
    background-size: 100%;
    transform-origin: bottom;
  }

  .b1 {
    background-image: url('@/static/images/praiseIcon/bg1.png');
    // 可以使用雪碧图
    // background-position: -42px -107px;
    // background-size: 188.5px 147px;
  }

  .b2 {
    background-image: url('@/static/images/praiseIcon/bg2.png');
    // background-position: -84px -107px;
    // background-size: 188.5px 147px;
  }

  .b3 {
    background-image: url('@/static/images/praiseIcon/bg3.png');
    // background-position: 0 -107px;
    // background-size: 188.5px 147px;
  }

  .b4 {
    background-image: url('@/static/images/praiseIcon/bg4.png');
    // background-position: -45px -62px;
    // background-size: 188.5px 147px;
  }

  .b5 {
    background-image: url('@/static/images/praiseIcon/bg5.png');
    // background-position: -107px -42px;
    // background-size: 188.5px 147px;
  }

  .b6 {
    background-image: url('@/static/images/praiseIcon/bg6.png');
    // background-position: -107px 0;
    // background-size: 188.5px 147px;
  }

  .bl1 {
    animation: bubble_1 $bubble_time linear 1 forwards,
      bubble_big_1 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl2 {
    animation: bubble_2 $bubble_time linear 1 forwards,
      bubble_big_2 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl3 {
    animation: bubble_3 $bubble_time linear 1 forwards,
      bubble_big_1 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl4 {
    animation: bubble_4 $bubble_time linear 1 forwards,
      bubble_big_2 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl5 {
    animation: bubble_5 $bubble_time linear 1 forwards,
      bubble_big_1 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl6 {
    animation: bubble_6 $bubble_time linear 1 forwards,
      bubble_big_3 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl7 {
    animation: bubble_7 $bubble_time linear 1 forwards,
      bubble_big_1 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl8 {
    animation: bubble_8 $bubble_time linear 1 forwards,
      bubble_big_3 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl9 {
    animation: bubble_9 $bubble_time linear 1 forwards,
      bubble_big_2 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl10 {
    animation: bubble_10 $bubble_time linear 1 forwards,
      bubble_big_1 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  .bl11 {
    animation: bubble_11 $bubble_time linear 1 forwards,
      bubble_big_2 $bubble_scale linear 1 forwards,
      bubble_y $bubble_time linear 1 forwards;
  }

  @keyframes bubble_11 {
    0% {}

    25% {
      margin-left: -10px;
    }

    50% {
      margin-left: -10px;
    }

    100% {
      margin-left: -18px;
    }
  }

  @keyframes bubble_10 {
    0% {}

    25% {
      margin-left: -20px;
    }

    50% {
      margin-left: -20px;
    }

    100% {
      margin-left: -20px;
    }
  }

  @keyframes bubble_9 {
    0% {}

    25% {
      margin-left: 10px;
    }

    50% {
      margin-left: 10px;
    }

    100% {
      margin-left: 10px;
    }
  }

  @keyframes bubble_8 {
    0% {}

    25% {
      margin-left: 20px;
    }

    50% {
      margin-left: 20px;
    }

    100% {
      margin-left: 20px;
    }
  }

  @keyframes bubble_7 {
    0% {}

    25% {
      margin-left: 3px;
    }

    50% {
      margin-left: 1px;
    }

    75% {
      margin-left: 2px;
    }

    100% {
      margin-left: 3px;
    }
  }

  @keyframes bubble_6 {
    0% {}

    25% {
      margin-left: -3px;
    }

    50% {
      margin-left: -1px;
    }

    75% {
      margin-left: -2px;
    }

    100% {
      margin-left: -3px;
    }
  }

  @keyframes bubble_5 {
    0% {}

    25% {
      margin-left: 5px;
    }

    50% {
      margin-left: -5px;
    }

    75% {
      margin-left: -10px;
    }

    100% {
      margin-left: -20px;
    }
  }

  @keyframes bubble_4 {
    0% {}

    25% {
      margin-left: -5px;
    }

    50% {
      margin-left: -5px;
    }

    75% {
      margin-left: 20px;
    }

    100% {
      margin-left: 10px;
    }
  }

  @keyframes bubble_3 {
    0% {}

    25% {
      margin-left: -20px;
    }

    50% {
      margin-left: 10px;
    }

    75% {
      margin-left: 20px;
    }

    100% {
      margin-left: -10px;
    }
  }

  @keyframes bubble_2 {
    0% {}

    25% {
      margin-left: 20px;
    }

    50% {
      margin-left: 25px;
    }

    75% {
      margin-left: 10px;
    }

    100% {
      margin-left: 5px;
    }
  }

  @keyframes bubble_1 {
    0% {}

    25% {
      margin-left: -8px;
    }

    50% {
      margin-left: 8px;
    }

    75% {
      margin-left: -15px;
    }

    100% {
      margin-left: 15px;
    }
  }

  @keyframes bubble_big_1 {
    0% {
      transform: scale(0.3);
    }

    100% {
      transform: scale(1.2);
    }
  }

  @keyframes bubble_big_2 {
    0% {
      transform: scale(0.3);
    }

    100% {
      transform: scale(0.9);
    }
  }

  @keyframes bubble_big_3 {
    0% {
      transform: scale(0.3);
    }

    100% {
      transform: scale(0.6);
    }
  }

  @keyframes bubble_y {
    0% {
      margin-bottom: 0;
    }

    10% {
      margin-bottom: 0;
    }

    75% {
      opacity: 1;
    }

    100% {
      margin-bottom: 200px;
      opacity: 0;
    }
  }

  .video {
    // z-index: -1;
  }

  .identification {
    font-size: 20rpx;
    overflow: hidden;
    margin: 10rpx 20rpx;
    display: inline-flex;

    .left {
      background: rgba(#fff, 0.6);
      border-radius: 8rpx;
      color: #333;
      padding: 0 12rpx;
      display: inline-block;
      font-weight: 800;
    }

    .rightID {
      margin-left: 12rpx;
    }
  }

  .u-line-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .u-m-r-30 {
    margin-right: 30rpx;
  }

  .shareButton {
    background-color: transparent;
    border: none;
  }

  .bannerdAction {
    padding: 30rpx;

  }

  .avatarBox {
    flex-direction: column;
    padding: 30rpx 0 0;

    .avatarBoxName {
      color: #333;
      font-size: 28rpx;
    }
  }
  .gift-popup {
    height: 700px;
    border: 6px solid red;
    overflow: hidden;
    background-color: #161822;
  }
  .liansong_donghua_box {
    position: fixed;
    left: 0;
    top: 300rpx;
    width: 750rpx;
    height: 150rpx;
  }
</style>
